<template>
	<div class="content scale-content" :style="{
			transformOrigin: 'center center', // 确保从左上角开始缩放
			width: imgWidth>scaledWidth?scaledWidth:imgWidth  + 'px', // 动态计算内容宽度
			height: imgHeight>scaledHeight?scaledHeight:imgHeight + 'px', // 动态计算内容高度
			transition: isDragging ? 'none' : 'transform 0s'
		}">
		<img  :src="currentImage&&currentImage.imageUrl" ref="imgs" @load="handleImageLoad" />
		<canvas ref="markCanvas" tabindex='0'></canvas>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import { draw, getJudge, delDraw } from "@/utils/drawCropper"; // 矩形绘制方法
import { computed } from 'vue';
export default {
	name: 'marks',
	props: ['imageUrllist', 'parentData', 'modelarealistcavans', 'pagevale', 'drawStatus',
		'scale',
		'isDragging',
		'startX',
		'startY',
		'offsetX',
		'offsetY',
	],
	data() {
		return {
			// imageUrl: require('../../assets/image/cardmodle.jpg'),
			// scale: 1,
			markList:[
					
				], // 标记内容数组
			isDrawing: false,
			questiontype: '',
			questionList: [
				{
					name: '定位点',
					id: 1
				},
				{
					name: '文字定位',
					id: 2
				}
			],
			currentIndex: 0, // 当前图片索引
			currentImage: {},
			images: [],
			value: '第1张',
			imgWidth: '',
			imgHeight: '',
			lastClickTime: 0,
			clickDelay: 300,
			defaultTemplatePointType: ''
		}
	},
	watch: {
		markList: function (val, oval) {
			console.info(val)
			this.$emit('updateMarkList', val);
		},
		modelarealistcavans: {
			handler(val, ova) {
				console.info(val,'-----------')
				this.markList = val
				setTimeout(() => {
					this.initCanvas(2); // 画布初始化
				}, 1000)
			},
			deep: true
		},
		pagevale(val, oval) {
			this.currentImage = this.images[val - 1]; // 更新当前图片
		},
		imageUrllist: {
			handler(val, ova) {
				this.images = val
				this.currentImage = val[this.pagevale - 1]; // 初始化当前图片
			},
			deep: true
		},
		drawStatus: {
			immediate: true,
			deep: true, // 添加深度监听
			handler(val, ova) {
				console.log('drawStatus changed:', val); // 调试日志
				if (val !== this.isDrawing) {
					this.isDrawing = val;
					this.handleDrawStatusChange(val);
				}
			}
		},
		isDrawing:{
			immediate: true,
			deep: true, // 添加深度监听
			handler(val, ova) {
				this.$emit('isDrawingChange', val)
			}
		},

	},
	created() {
	},
	mounted() {
		this.currentImage = this.imageUrllist[this.currentIndex]; // 初始化当前图片
		this.handleImageLoad()
		setTimeout(()=>{
			this.initCanvas(1); // 画布初始化
		},1000)
		document.addEventListener('customMouseDown', (event) => {
			// //console.log(event);
		});
	},
	components: {},
	computed: {
		...mapState(['circleselectionstatus']), // 从 Vuex 中获取状态
		scaledWidth() {
			return this.imgWidth * (this.scale / 100)
		},
		scaledHeight() {
			return this.imgHeight * (this.scale / 100)
		},
		
	},
	methods: {
		getDraggableElement() {
			return this.$refs.draggableElement;
		},
		modeltypetab(val) {
			this.isDrawing = true;
			this.$emit('modeltype', val);
			// 设置默认的templatePointType
			this.defaultTemplatePointType = val; // 保存当前选择的类型
			this.startCrop();
		},
		startCrop() {
			let cav = this.$refs.markCanvas;
			// 在创建新区域时使用保存的类型
			const newArea = {
				templatePointType: this.defaultTemplatePointType, // 使用选择的类型
				// ... 其他属性
			};
			// draw(cav, this.modelarealistcavans, undefined, this.isDrawing);
			draw(cav, this.modelarealistcavans, undefined, that.isDrawing, (newRectangle) => {
				// 处理新矩形对象
				this.handleNewRectangle(newRectangle);
			});
		},
		handleImageLoad() {
			const img = this.$refs.imgs;
			const canvas = this.$refs.markCanvas;

			// 设置 canvas 宽高与图片一致
			canvas.width = img.naturalWidth;  // 图片原始宽度
			canvas.height = img.naturalHeight; // 图片原始高度

			// 如果需要设置样式宽高（CSS 控制显示大小）
			this.imgWidth = `${img.naturalWidth}px`;
			this.imgHeight = `${img.naturalHeight}px`;

			this.initCanvas()
		},
		/* 画布初始化 */
		initCanvas(num) {
			let that = this
			this.$nextTick(() => {
				// 初始化canvas宽高
				let cav = that.$refs.markCanvas;
				let ctx = cav.getContext('2d');
				ctx.strokeStyle = '#295CFF'
				cav.style.cursor = 'crosshair'
				const img = that.$refs.imgs;
				if (num == 1) {
					img.onload = () => {
						cav.width = img.naturalWidth;
						cav.height = img.naturalHeight;
						that.imgHeight = img.naturalHeight;
						that.imgWidth = img.naturalWidth;
						// 计算使用变量
						let list = that.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
						console.info('newlist', list)
						// 若list长度不为0, 则显示已标记框
						if (list.length !== 0) {
							// //console.info('dddddd')
							list.forEach(function (value, index, array) {
								ctx.clearRect(value.x, value.y, value.width, value.height);
								// 遍历绘制所有标记框
								ctx.beginPath();
								ctx.strokeStyle = '#295CFF';
								ctx.fillStyle = 'RGBA(102,102,102,0.2)'; // 设置背景颜色为蓝色
								ctx.rect(value.x, value.y, value.width, value.height);
								ctx.stroke();
								// 添加透明背景
								ctx.fillStyle = 'rgba(135, 206, 235, 0.2)'; // 设置背景颜色为半透明白色
								ctx.fillRect(value.x, value.y, value.width, value.height); // 填充矩形

								if (value.options && value.options.length > 0) {
									// //console.info(value.options.length);
									value.options.forEach(option => {
										ctx.beginPath();
										ctx.fillStyle = 'rgba(255, 0, 0, 0.1)'; // 透明度0.2
        								ctx.fillRect(option.x, option.y, option.width, option.height);
										ctx.strokeStyle = 'rgba(255, 0, 0, 0.4)';  // 设置边框颜色为红色
										ctx.rect(option.x, option.y, option.width, option.height);
										ctx.stroke();
									});
								}

								// 新增题型显示 - 统一样式
								const typeButtonWidth = 80;
								const typeButtonHeight = 24;

								// 绘制文字背景 - 贴着矩形框顶部
								ctx.fillStyle = 'rgba(135, 206, 235, 0.2)'; // 设置背景颜色为半透明白色
								ctx.fillRect(value.x, value.y - typeButtonHeight, typeButtonWidth, typeButtonHeight);

								// 设置文字样式
								ctx.fillStyle = '#1A48DB';
								ctx.font = '14px Microsoft YaHei';
								ctx.textAlign = 'center';
								ctx.textBaseline = 'middle';

								// 根据templatePointType显示不同内容
								let typeText = value.templatePointType;
								// 绘制文字 - 调整文字垂直位置，确保居中
								ctx.fillText(typeText + name, value.x + typeButtonWidth / 2, value.y - typeButtonHeight / 2);


							});
						}
						cav.addEventListener('click', function (event) {
							const rect = cav.getBoundingClientRect();
							const x = event.clientX - rect.left;
							const y = event.clientY - rect.top;
							that.handleCanvasClick(x, y);
						});
						// 调用封装的绘制方法
						//   draw(cav, list,undefined, this.isDrawing);
						draw(cav, list, undefined, that.isDrawing, (newRectangle) => {
							// 处理新矩形对象
							that.handleNewRectangle(newRectangle);
						});
					}
				} else {
					cav.width = img.naturalWidth;
					cav.height = img.naturalHeight;
					that.imgHeight = img.naturalHeight;
					that.imgWidth = img.naturalWidth;
					// 计算使用变量
					let list = that.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
					// console.info('newlist', list)
					// 若list长度不为0, 则显示已标记框
					if (list.length !== 0) {
						// //console.info('dddddd')
						list.forEach(function (value, index, array) {
							// console.info('marklist', value)
							ctx.clearRect(value.x, value.y, value.width, value.height);
							// 遍历绘制所有标记框
							ctx.beginPath();
							ctx.strokeStyle = '#295CFF';
							ctx.rect(value.x, value.y, value.width, value.height);
							ctx.stroke();
							// 添加透明背景
							ctx.fillStyle = 'rgba(135, 206, 235, 0.2)'; // 设置背景颜色为半透明白色
							ctx.fillRect(value.x, value.y, value.width, value.height); // 填充矩形

							if (value.options && value.options.length > 0) {
								// //console.info(value.options.length);
								value.options.forEach(option => {
									ctx.beginPath();
									ctx.fillStyle = 'rgba(255, 0, 0, 0.1)'; // 透明度0.2
									ctx.fillRect(option.x, option.y, option.width, option.height);
									ctx.strokeStyle = 'rgba(255, 0, 0, 0.4)';  // 设置边框颜色为红色
									ctx.rect(option.x, option.y, option.width, option.height);
									ctx.stroke();
								});
							}

							// 新增题型显示 - 统一样式
							const typeButtonWidth = 80;
							const typeButtonHeight = 24;

							// 绘制文字背景 - 贴着矩形框顶部
							ctx.fillStyle = 'rgba(135, 206, 235, 0.2)'; // 设置背景颜色为半透明白色
							ctx.fillRect(value.x, value.y - typeButtonHeight, typeButtonWidth, typeButtonHeight);

							// 设置文字样式
							ctx.fillStyle = '#1A48DB';
							ctx.font = '14px Microsoft YaHei';
							ctx.textAlign = 'center';
							ctx.textBaseline = 'middle';

							// 根据templatePointType显示不同内容
							let typeText = value.templatePointType;
							// 绘制文字 - 调整文字垂直位置，确保居中
							ctx.fillText(typeText + name, value.x + typeButtonWidth / 2, value.y - typeButtonHeight / 2);


						});
					}
					cav.addEventListener('click', function (event) {
						const rect = cav.getBoundingClientRect();
						const x = event.clientX - rect.left;
						const y = event.clientY - rect.top;
						that.handleCanvasClick(x, y);
					});
					// //console.info(list)
					// 调用封装的绘制方法
					// draw(cav, list,undefined, this.isDrawing);
					draw(cav, list, undefined, that.isDrawing, (newRectangle) => {
						// 处理新矩形对象
						that.handleNewRectangle(newRectangle);
					});


				}
			})

		},
		// 计算按钮位置
		getButtonPositions(mark) {
			const buttonWidth = 60;
			const buttonHeight = 20;
			const buttonMargin = 5;

			const editButtonX = mark.x + mark.width - buttonWidth - buttonMargin;
			const editButtonY = mark.y + mark.height + buttonMargin;
			const deleteButtonX = editButtonX - buttonWidth - buttonMargin;
			const deleteButtonY = editButtonY;

			return {
				edit: {
					x: editButtonX,
					y: editButtonY,
					width: buttonWidth,
					height: buttonHeight
				},
				delete: {
					x: deleteButtonX,
					y: deleteButtonY,
					width: buttonWidth,
					height: buttonHeight
				}
			};
		},

		// 检查点击是否在按钮区域内
		isClickInButton(x, y, button) {
			return x > button.x &&
				x < button.x + button.width &&
				y > button.y &&
				y < button.y + button.height;
		},

		// 处理画布点击
		handleCanvasClick(x, y) {
			// 检查点击时间间隔
			const now = Date.now();
			if (now - this.lastClickTime < this.clickDelay) {
				return;
			}
			this.lastClickTime = now;

			if (this.isProcessing) return;

			let list = this.markList;
			let handled = false;

			list.some((mark, index) => {
				if (handled) return true;

				const buttons = this.getButtonPositions(mark);

				if (this.isClickInButton(x, y, buttons.edit)) {
					handled = true;
					this.handleEdit(mark);
					return true;
				}

				if (this.isClickInButton(x, y, buttons.delete)) {
					handled = true;
					this.handleMarkDelete(mark, index);
					return true;
				}

				return false;
			});
		},

		// 处理编辑
		handleEdit(mark) {
			// 防止重复处理
			if (this.isProcessing) return;

			try {
				this.isProcessing = true;
				let obj = { ishow: true }
				const mergedObj = Object.assign({}, obj, mark);
				this.$emit('editContent', mergedObj)
				//console.info('编辑按钮被点击', mark); // 添加mark信息以便调试
				// 这里添加你的编辑逻辑
			} finally {
				this.isProcessing = false;
			}
		},

		// 处理删除
		async handleMarkDelete(mark, index) {
			try {
				this.isProcessing = true;

				if (mark.id) {
					// 删除服务器数据
					await this.deleteFromServer(mark.id);
				} else {
					// 删除本地数据
					this.deleteLocal(index);
				}
			} finally {
				this.isProcessing = false;
			}
		},

		// 从服务器删除
		async deleteFromServer(id) {
			try {
				const res = await dele('/template/cuttingregion/delete',
					{ id },
					{
						headers: {
							'Content-Type': 'x-www-form-urlencoded',
						}
					}
				);

				if (res.code === 200) {
					this.$message.success('删除成功');
					this.$emit('refreshdata');
				} else {
					throw new Error(res.message || '删除失败');
				}
			} catch (error) {
				console.error('Delete error:', error);
				this.$message.error(error.message || '删除失败');
				throw error;
			}
		},

		// 本地删除
		deleteLocal(index) {
			this.markList.splice(index, 1);
			this.$message.success('删除成功');
		},
		handleNewRectangle(newRectangle) {
			console.info('newRectangle', newRectangle)
			this.$emit('newRectangle', newRectangle);
		},
		handleDrawStatusChange(val) {
			if (val) {
				let cav = this.$refs.markCanvas;
				if (cav) {
					draw(cav, this.modelarealistcavans, undefined, val, (newRectangle) => {
						this.handleNewRectangle(newRectangle);
						// 绘制完成后重置状态
						this.isDrawing = false;
						this.$emit('update:drawStatus', false);
					});
				}
			}
		},
	},
	beforeDestroy() {
		// 移除事件监听器
		document.removeEventListener('customMouseDown', (event) => { })
	}
}
</script>
<style lang='scss' scoped>
.content {
	position: relative;
}
.scale-content {
  transition: transform 0.3s ease;
  will-change: transform;
}
img {
	position: absolute;
	top: 0;
	left: 0;
	object-fit: contain;
	z-index: 9;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.routate {
	position: fixed;
	left: 25px;
	top: 110px;
	background: #fff;
	height: 60px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	font-size: 14px;
	color: #557292;
	border-radius: 10px;
	z-index: 111;
	/* transform: translateX(-50%); */
}

.el-select,
.el-input {
	width: 100px;
}

.el-select {
	margin-right: 10px;
	margin-left: 10px;
}

.el-input {
	margin-left: 10px;
	margin-right: 10px;
}

.routate>>>.el-button {
	border-radius: 10px;
	height: 35px;
	padding: 0 10px;
}

.routate>>>.el-input__inner {
	border-radius: 10px;
	height: 35px;
}
</style>
</style>